
<style type="text/css">


</style>

<!--<div class="layui-card">-->
<!--    <div class="layui-card-header">-->
<!--        <h2 class="header-title">栏目表</h2>-->
<!--        <span class="layui-breadcrumb pull-right">-->
<!--          <a href="#!home">首页</a>-->
<!--          <a><cite>栏目表</cite></a>-->
<!--        </span>-->
<!--    </div>-->
<!--    <div class="layui-card-body">-->
<!--        <div class="layui-form toolbar">-->
<!--                      搜索：  <select id="cmscategory-search-key">-->
<!--            <option value="">-请选择-</option>-->
<!--                 <option value="id"></option>-->
<!--                 <option value="parent_id">父级编号</option>-->
<!--                 <option value="parent_ids">所有父级编号</option>-->
<!--                 <option value="business_id"></option>-->
<!--                 <option value="module">栏目模块，保留</option>-->
<!--                 <option value="name">栏目名称</option>-->
<!--                 <option value="image">栏目图片</option>-->
<!--                 <option value="href">栏目链接</option>-->
<!--                 <option value="description">描述</option>-->
<!--                 <option value="keywords">关键字</option>-->
<!--                 <option value="sort">排序</option>-->
<!--                 <option value="in_showWhere">显示位置（保留）：1&#45;&#45;分类页；2&#45;&#45;导航等</option>-->
<!--                 <option value="show_modes">展示方式</option>-->
<!--                 <option value="allow_comment">是否允许评论：1&#45;&#45;允许；0&#45;&#45;不允许</option>-->
<!--                 <option value="is_audit">是否需要审核，1&#45;&#45;需要；0&#45;&#45;不需要</option>-->
<!--                 <option value="create_by">创建者</option>-->
<!--                 <option value="create_date">创建时间</option>-->
<!--                 <option value="update_by">更新时间</option>-->
<!--                 <option value="update_date"></option>-->
<!--                 <option value="remarks">备注信息</option>-->
<!--                 <option value="del_flag">删除标记，0&#45;&#45;未删除，1&#45;&#45;删除</option>-->
<!--                 </select>&emsp;-->
<!--            <input id="cmscategory-search-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>&emsp;-->
<!--            <button id="cmscategory-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>-->
<!--        </div>-->

<!--        <table class="layui-table" id="cmscategory-table" lay-filter="cmscategory-table"></table>-->
<!--    </div>-->
<!--</div>-->

<div class="divMainSearch layui-card-body">
    <form class="layui-form" action="">
    </form>

    <div class="toolbar" style="margin-top: 5px; padding-left: 30px;"  >
        <!--        <button id="btAdd" class="layui-btn">-->
        <!--            <i class="layui-icon">&#xe608;</i> 添加-->
        <!--        </button>-->
    </div>
</div>



<table id="cmsCategoryMain" lay-filter="cmsCategoryMain"></table>

<!-- 文章头编缉 -->
<div id="cmsCategoryDetail" style="display: none" style="z-index: 99;">



    <form    class="layui-form"  id="cmsCategoryfrm" >
        <input name="id" hidden>
        <input name="articleDataId" hidden>
        <br>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">类型名</label>
            <div class="layui-input-block" style="margin-right: 5%;">
                <input name="name"   class="layui-input"    />
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block" style="margin-right: 5%;">
                <input name="description"   class="layui-input"    />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否显示主页</label>
            <div class="layui-input-block" style="margin-right: 5%;">
                <select name="inShowwhere"  lay-verify="required"    >

                    <option value="0">否</option>
                    <option value="1">是</option>

                </select>
            </div>
        </div>


        <div class="layui-form-item layui-form-text"   >
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block" style="margin-right: 5%;">
                <input type="hidden" name="image"   id="uploadPath" class="layui-input"     />
                <img id="uploadimg" src="" width="50" />


                <button type="button" class="layui-btn"  id="uploadUrl"   lay-filter="uploadFile">
                    <i class="layui-icon">&#xe67c;</i>选择图片
                </button>
            </div>
        </div>


        <div style="clear: both; margin-bottom: 10px;"></div>
        <div class="layui-row" style="text-algin:center; ">
            <button type="button" style=" margin-left:60%;" 	class="layui-btn layui-btn-primary      layui-layer-close  ">关闭</button>
            <button type="button" class="layui-btn layui-btn-normal"  style=" margin-left:33%;" lay-submit lay-filter="submitcmsCategory" >确认提交</button>
        </div>
    </form>
</div>


<!-- 表格操作列 -->
<script type="text/html" id="cmscategory-table-bar">
 {{#   if(admin.hasPerm("cms:cmscategory:update") ){   }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
 {{#     } }} 
 {{#  if(admin.hasPerm("cms:cmscategory:delete") ){   }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
 {{#     } }} 
</script>


<script type="text/html" id="toolbar">
     {{#  if(admin.hasPerm("cms:cmscategory:save")){ }}
     <button id="cmscategory-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
     {{#     } }} 
 
</script>

<script type="text/html" id="btImage">
    <image src="{{d.image}}" style="width:50px; " />
</script>


<script type="text/html" id="btISHOW">
    {{# if(d.inShowwhere == 0){ }}
    否
    {{# } }}

    {{# if(d.inShowwhere == 1){ }}
    是
    {{# } }}
</script>


<script>
   var admin;
    layui.use(['form', 'table', 'util', 'config', 'admin', 'upload','laytpl','element' ], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
          admin = layui.admin;
        //上传
        var upload = layui.upload;
        let laytpl = layui.laytpl;
        let element = layui.element;

        var addDialogIndex={};
        var active = {};
        var currpage=1;

        // 渲染表格
        table.render({
            elem: '#cmsCategoryMain',
            url: config.base_server + 'cms/cmscategory/list',
            method: 'GET',
       
            page: true,
            cols:  [ [ //表头
                {  width:80, title: '序号',fixed: 'left',type: 'numbers'},
                {
                    field : 'name',
                    title : '标题'
                } , {
                    field : 'description',
                    title : '描述'
                }, {
                    field : 'inShowwhere',
                    title : '是否显示主页',
                    toolbar : 	"#btISHOW"
                },  {
                    field : 'image',
                    align : 'center',
                    title : '图片' ,
                    toolbar : 	"#btImage"
                }, {
                    fixed : 'right',
                    align : 'center',
                    width : 280,
                    toolbar : '#cmscategory-table-bar'
                } ] ],
            done: function(res, curr, count){
                //得到当前页码
                currpage=curr;
            }
        });
        
        laytpl($("#toolbar")[0].innerHTML).render({ }, function(html){
			  $(".layui-card-body .toolbar").append(html);
			  element.render('nav');
		  });

        // 添加按钮点击事件
        $('#cmscategory-btn-add').click(function () {
           // showEditModel();
            active.edit( )
        });

        //创建一个上传组件 remarkuploadUrl
        upload.render({
            elem: '#uploadUrl'
            ,url: config.base_server+'/file/simditorUpVedioFile'
            ,accept: "images"
            ,before: function(o){
                console.log(o)
            }
            ,done: function(res, index, upload){ //上传后的回调
                if(res.code==0){
                    $('#uploadimg').attr("src", res.data.file_path);
                    $('#uploadPath').val(res.data.file_path);
                }
            }
        })


        // 工具条点击事件
        table.on('tool(cmsCategoryMain)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                console.log(data);
                active.edit(data);

               // showEditModel(data);
            }  else if (layEvent === 'del') { // 删除
                layer.confirm('确定删除吗？', function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req('cms/cmscategory/delete/'+obj.data.id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 500});
                            table.reload('cmscategory-table', {});
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 500});
                        }
                    }, 'delete');
                });
            }
        });

        active.open =function(el,sucess,cl){

            var c = 	layer.open({
                type : 1,
                title : el.title,
                area : [ !el.width?'60%':el.width, !el.height?'60%':el.height ],
                content : el.content,
                zIndex:99,
                success : function() {
                    (sucess!=null?sucess():"");
                    //	active.reSetShow();
                }
            });
            if(cl!=null&&cl!=undefined)addDialogIndex[cl]=c;

        }

        active.edit=function(e){

            active.open({title:"编缉类型 ",content: $('#cmsCategoryDetail')},function(){
                formClear($, '#cmsCategoryfrm')
                if(e) {
                    formLoad($, '#cmsCategoryfrm', e);
                    $('#uploadimg').attr("src", e.image);
                }else{
                    $('#uploadimg').attr("src", 'assets/images/defaultimg.png');
                }
                form.render();
            },"submitcategory")
        }


        form.on('submit(submitcmsCategory)', function(data) {
            layer.close(addDialogIndex.submitcategory);
            admin.req("/cms/cmscategory/save",JSON.stringify(data.field),function(e){
                if(e.code==0){
                    table.reload('cmsCategoryMain', { page : { curr :  currpage }  });
                }
            } ,"POST");
        })



        // 搜索按钮点击事件
        $('#cmscategory-btn-search').click(function () {
            var key = $('#cmscategory-search-key').val();
            var value = $('#cmscategory-search-value').val();
            table.reload('cmsCategoryMain', {where: {searchKey: key, searchValue: value}});
        });

    });
</script>
